<template>
  <div>

        <el-form inline :model="CourseQuery" class="demo-form-inline">
          <el-form-item>
            <el-input v-model="CourseQuery.title" placeholder="审批人"></el-input>
          </el-form-item>
          <el-form-item>
            <el-select v-model="CourseQuery.status" placeholder="活动区域">
              <el-option label="已发布" value="Normal"></el-option>
              <el-option label="未发布" value="Draft"></el-option>
            </el-select>
          </el-form-item>

          <el-form-item>
            <el-button type="primary" @click="screenCourse()">查询</el-button>
            <el-button type="primary" @click="empty()">清空</el-button>
          </el-form-item>
        </el-form>


        <el-table
          :data="data"
          border

          style="height:72vh">

          <el-table-column
            type="selection"
            width="55">
          </el-table-column>
          <el-table-column
            prop="avatar"
            align="center"
            label="封面"

            >
            <template slot-scope="scope">
                <img :src="scope.row.cover" class="avatar-img"/>
            </template>
          </el-table-column>

          <el-table-column
            prop="title"
            align="center"
            label="姓名"

            >
          </el-table-column>
          <el-table-column
            label="课时"
            align="center"

           >
            <template slot-scope="scope">
                课时：{{scope.row.lessonNum}}
            </template>
          </el-table-column>
          <el-table-column

            label="状态"

            align="center"
           >
           <template slot-scope="scope">
               {{scope.row.status=="Normal"?"已发布":"未发布" }}
           </template>
          </el-table-column>
          <el-table-column
            prop="gmtCreate"
            label="时间"

            align="center"
            >
          </el-table-column>
          <el-table-column

            align="center"
            label="价格"

            >
            <template slot-scope="scope">
                {{scope.row.price==0?"免费":scope.row.price }}
            </template>
          </el-table-column>

          <el-table-column prop="buyCount" label="销售" align="center"/>
          <el-table-column prop="viewCount" label="浏览" align="center"/>

           <el-table-column label="操作" align="center" >
                <template slot-scope="scope">
                  <el-button
                    size="mini"
                    @click="CourseModify(scope.row)">编辑课程</el-button>
                    <el-button
                      size="mini"
                      @click="ChapterModify(scope.row)">编辑大纲</el-button>
                  <el-button
                    size="mini"
                    type="danger"
                    @click="CourseDelete(scope.row)">删除</el-button>
                </template>
              </el-table-column>
        </el-table>

        <el-pagination
          align="center"
          background
          :page-size="pageSize"
          :current-page="currentPage"
          :total="CourselistData.length"
          layout="total, prev, pager, next"
          @current-change="pagingCurrentChange"


          >
        </el-pagination>
  </div>
</template>

<script>
  import {getCourselist,delCourselist} from '@/api/course/course.js'
export default {

  data() {
    return {
        Courselist:[],
        CourselistData:[],
        pageSize:5,//分页大小
        currentPage:1 ,//当前页
        total:0,//总共
        Coursetitle:"",
        CourseQuery:{
          title:"",
          status:""
        }//
    }
  },
  created() {
    this.getAll()

  },
  watch: {

  },

  methods: {
    //查询全部数据
    getAll(){
      getCourselist().then(res=>{
         this.Courselist = res.data.list
         this.CourselistData = res.data.list
         this.total = res.data.list.length
      })

    },

    //条件查询
    screenCourse(){
        if(this.CourseQuery.title == "" && this.CourseQuery.status==""){
            this.CourselistData = this.Courselist
            return
        }
        if(this.CourseQuery.title !== "" && this.CourseQuery.status !== ""){
           this.CourselistData = []
           let ary=[]
           for (let item of this.Courselist) {
             if(item.status==this.CourseQuery.status){
                ary.push(item)
             }
           }

           for (let item of ary) {
             if(item.title.includes(this.CourseQuery.title)){
                this.CourselistData.push(item)
             }
           }
          return
        }
        this.CourselistData = []

        for (let item of this.Courselist) {
          if(this.CourseQuery.status){
            if(item.status==this.CourseQuery.status){
               this.CourselistData.push(item)
            }
          }
          if(this.CourseQuery.title){
            if(item.title.includes(this.CourseQuery.title)){
              console.log(item.title)
               this.CourselistData.push(item)
            }
          }
        }


    },
   //条件查询清空
    empty(){
      this.CourseQuery={
        title:"",
        status:""
      };
      this.getAll()
    },

    pagingCurrentChange(e){
        this.currentPage=e
    },

    CourseDelete(data){
      if(!window.confirm(`你确定要{${data.title}}删除吗？`)){return}

        delCourselist(data.id).then(res=>{
           this.$notify({
            title: '删除成功',
            message: '这是一条成功的提示消息',
            type: 'success'
           });
           this.getAll()
        })
    },
    CourseModify(data){
       this.$router.push("/course/Info/"+data.id)
    },
    ChapterModify(data){
       this.$router.push("/course/chapter/"+data.id)
    },



   },
   computed:{
      data(){
          return this.CourselistData.slice((this.currentPage-1) * this.pageSize,this.currentPage*this.pageSize)
      }
   }
}
</script>

<style scoped lang="scss">
  .demo-form-inline{
    margin-top: 10px;
    padding-left: 10px;
  }
  .avatar-img{
    width: 8vw;
    height: 10vh;
  }
</style>
